import React, { useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import { PlusOutlined } from '@ant-design/icons'
import CollectionsModal from '../../ModalView/CollectionsModal'

interface ICollectBtnProps {
    width: string
    height: string
    imgId: string
    expend?: boolean
    data?: any
}

export function CollectOutLineBtn(props: ICollectBtnProps) {
    const [outLineExpend, setOutLineExpend] = useState(false)
    return (
        <>
            <div
                className={`${style.out__line} ${outLineExpend ? 'active' : ''}`}
                onClick={() => {
                    setOutLineExpend(!outLineExpend)
                }}
                style={{
                    ['--width' as any]: props.width,
                    ['--height' as any]: props.height
                }}>
                <PlusOutlined />
            </div>
            {outLineExpend ? (
                <div
                    onClick={() => {
                        setOutLineExpend(false)
                    }}>
                    <CollectionsModal img={props.data.img} imgId={props.data.imgId} />
                </div>
            ) : (
                ''
            )}
        </>
    )
}
export default function CollectBtn(props: ICollectBtnProps) {
    const [expend, setExpend] = useState(false)
    return (
        <div
            className={`${style.container} ${expend ? 'active' : ''}`}
            onClick={() => {
                setExpend(!expend)
            }}
            style={{
                ['--width' as any]: props.width,
                ['--height' as any]: props.height
            }}>
            <PlusOutlined />
        </div>
    )
}
